<template>
    <view style="height: 100%">
        <!-- 引入过滤器 -->
        <!-- <wxs  module="filter"  src="/miniprogram/miniprogram_npm/@vant/weapp/wxs/filter.wxs"/> -->
        <view>
            <!-- 卡券 -->
            <view v-if="cardList.length" class="card_list_wrap">
                <view class="card_list" @tap.stop.prevent="toCardCoupons" :data-id="item.id" v-for="(item, index) in cardList" :key="index">
                    <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/tags.png" class="card_tags" v-if="item.expireStatus"></image>

                    <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/tags_new.png" class="card_tags" v-if="item.newStatus"></image>

                    <!-- <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/line_bg.png" class="card_list_bg" wx:if="{{item.applyStationType == 1}}"></image>
            <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/line-yellow_bg.png" class="card_list_bg" wx:if="{{item.applyStationType == 2 || item.applyStationType == 3}}"></image>         -->

                    <image
                        :src="item.picture ? item.picture : 'http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/line_bg.png'"
                        class="card_list_bg"
                        v-if="item.applyStationType == 1"
                    ></image>

                    <image
                        :src="item.picture ? item.picture : 'http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/line-yellow_bg.png'"
                        class="card_list_bg"
                        v-if="item.applyStationType == 2 || item.applyStationType == 3"
                    ></image>

                    <view class="card_left">
                        <view>
                            <view class="crad_left_money">
                                <text class="money_type">￥</text>
                                <text class="money_amonut">{{ item.couponAmount }}</text>
                            </view>
                            <view class="voucher_type" v-if="item.applyStationType == 1">通用券</view>
                            <view class="voucher_type" v-if="item.applyStationType == 2">站点专属</view>
                            <view class="voucher_type" v-if="item.applyStationType == 3">指定条件</view>
                        </view>
                    </view>

                    <view class="card_right">
                        <view class="coupon_stations">
                            <view class="coupon_type flex-row-start">
                                <view v-if="item.type == 1">服务费券</view>
                                <view v-if="item.type == 2">电费券</view>
                                <view v-if="item.type == 3">现金券</view>

                                <view class="refund_btn flex-row-center" v-if="item.status == 5">退款冻结</view>
                            </view>
                            <view class="stations" @tap="naviStations">
                                <view class="flex-row-start">
                                    <view v-if="item.applyStationType == 2">适用站点</view>
                                    <view v-if="item.applyStationType == 3">指定条件</view>
                                    <image
                                        v-if="item.applyStationType == 2 || item.applyStationType == 3"
                                        src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/turn.png"
                                        alt=""
                                        class="turn"
                                    />
                                </view>
                            </view>
                        </view>
                        <!-- <view class="coupon_stations">
                    <view  class="coupon_type" >{{item.typeName}}</view>
                    <view class="stations" wx:if="{{item.availableSiteName}}" data-stations="{{item.availableSiteName}}">
                      <view>限部分站点</view> 
                      <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/turn.png" alt="" class="turn"/>   
                    </view>
                </view> -->
                        <view class="full_reduction">满{{ item.meetAmount }}可用</view>
                        <view class="validity_date flex-row-start">
                            <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/icon1.png" class="time_icon" />
                            {{ item.receiveTime }}
                        </view>
                        <view class="validity_date flex-row-start">
                            <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/icon2.png" class="time_icon" />
                            {{ item.expireTime }}
                        </view>
                    </view>
                </view>
            </view>
            <Upgrading text="暂无内容" v-else></Upgrading>
            <!-- 历史卡券,卡券中心 -->
            <view class="ticket_center">
                <view class="ticket_center_type" @tap="naviHistoryCard">历史卡券</view>
                <!-- <view class="ticket_center_vertical"></view>
        <view class="ticket_center_type">券码中心</view> -->
            </view>
        </view>
        <!-- 站点弹窗 -->
        <u-popup @close="onClose" position="center" :show="stationsVisible" custom-style="border-radius: 20rpx;" class="announcement-popup">
            <view class="announcement">
                <view class="announcement-content">
                    <view class="announcement-title">适用站点</view>
                    <view class="announcement-body">{{ stations }}</view>
                </view>
                <view class="announcement-close" @tap="stationsConfirm">我知道了</view>
            </view>
        </u-popup>
    </view>
</template>

<script lang="ts">
// import zpMixins from '@/uni_modules/zp-mixins/index';
import Upgrading from '@/marketing_page/components/upgrading/upgrading.vue';   
// import vanPopup from './@vant/weapp/popup/index';
// mine/pages/cardVoucher/cardVoucher.ts
import { getMyCouponPage } from '../../../api/https';
import { getPageCoupon } from '../../../api/marketing/coupon';
export default {
    components: {
        Upgrading,
        // vanPopup
    },
    data() {
        return {
            cardList: [],
            stationsVisible: false,
            stations: '',
            page: 1,
            pageNum: 0,
            loading: false,
            config: {
                current: 1,
                size: 10
            }
        };
    },
    onLoad: function () {
        // this.CouponPage(2)
        this.getMyCouponPage();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        this.getMyCouponPage();
        // let page = this.data.page + 1; //获取当前页数并+1
        // if (this.data.page < this.data.pageNum) {
        //   this.setData({
        //     page
        //   })
        //   this.CouponPage(2)
        // }
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        // this.data.page = 1
        // if (this.data.cardList.length) {
        //   wx.showNavigationBarLoading(); //在标题栏中显示加载图标
        //   this.CouponPage(1)
        // }
    },
    methods: {
        naviHistoryCard() {
            if (this.marketingSwitch) {
				console.log('营销获客正常,走外包8081逻辑');
				uni.navigateTo({
				    url: '../historyCardVoucherYx/historyCardVoucherYx'
				});
				
            } else {
               console.log('营销获客挂了,走7100逻辑');
               uni.navigateTo({
                   url: '../historyCardVoucher/historyCardVoucher'
               });
            }
        },

        async getMyCouponPage() {
            try {
                const res = await getPageCoupon(this.config);
                let cardList = res.data.records || [];
                this.setData({
                    cardList: [...this.cardList, ...cardList]
                });
                this.config.current++;
            } catch (error) {}
        },

        CouponPage(index: any) {
            const tmp = this;
            getMyCouponPage({
                tab: 1,
                current: tmp.page,
                size: 10
            }).then((res: any) => {
                if (res.code == 0) {
                    const total = res.data.total;
                    const pageNum = Math.ceil(total / 10);
                    let cardList;
                    switch (index) {
                        // 下拉刷新
                        case 1:
                            cardList = res.data.records;
                            uni.hideNavigationBarLoading(); //在标题栏中隐藏加载图标
                            uni.stopPullDownRefresh();
                            break;
                        // 上拉加载或初始化页面
                        case 2:
                            cardList = tmp.cardList.concat(res.data.records);
                            break;
                    }
                    tmp.setData({
                        cardList,
                        pageNum,
                        loading: false
                    });
                } else if (res.code == 4) {
                    let cardList: any = [];
                    tmp.setData({
                        cardList
                    });
                }
            });
        },

        naviStations(e: any) {
            const {
                currentTarget: {
                    dataset: { stations }
                }
            } = e;
            if (stations) {
                this.setData({
                    stationsVisible: true,
                    stations
                });
            }
        },

        stationsConfirm() {
            this.setData({
                stationsVisible: false
            });
        },

        //去优惠券卡券详情
        toCardCoupons(e: any) {
            // console.log(e.currentTarget.dataset)
            // const items = JSON.stringify(e.currentTarget.dataset.items)
            // console.log(items)
            uni.navigateTo({
                url: '/homeSub/pages/discount/cardCoupons/cardCoupons?id=' + e.currentTarget.dataset.id
            });
        },

        onClose() {
            console.log('占位：函数 onClose 未声明');
        }
    }
};
</script>
<style lang="less" scoped>
@import '../../../commin/commin.less';
page {
    background-color: #f5f7fa;
    padding-bottom: 120rpx;
}
.card_list_wrap {
    .paddings (20rpx,24rpx,4rpx,24rpx);
    .card_list {
        .position (relative, 0, 0, 0, 0);
        width: 704rpx;
        height: 246rpx;
        margin-bottom: 16rpx;
        .card_list_bg {
            width: 100%;
            height: 100%;
        }
        .card_tags {
            .position (absolute, 0rpx, auto, auto, 0rpx);
            width: 78rpx;
            height: 33rpx;
        }
        .card_left {
            .position (absolute, 64rpx, 0, 0,0);
            .kuan (230rpx);
            .textalign();
            .crad_left_money {
                font-family: PingFang SC;
                font-weight: bold;
                color: #ffffff;
                .money_type {
                    font-size: 26rpx;
                }
                .money_amonut {
                    font-size: 52rpx;
                }
            }
            .voucher_type {
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #ffffff;
                text-align: center;
            }
        }
        .card_right {
            .position (absolute, 39rpx, 0, 0, 278rpx);
            .coupon_type {
                font-size: 34rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #1a1a1a;
            }
            .coupon_stations {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .stations {
                    display: flex;
                    justify-content: start;
                    align-items: center;
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #707485;
                    margin-right: 32rpx;
                    .turn {
                        .kuangao (10rpx,19rpx);
                        margin-left: 11rpx;
                    }
                }
            }
            .full_reduction {
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #606266;
                margin: 15rpx 0;
            }
            .validity_date {
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #909399;
                line-height: 1.4;
            }
        }
    }
}
.time_icon {
    width: 24rpx;
    height: 24rpx;
    margin-right: 10rpx;
}
.refund_btn {
    width: 118rpx;
    height: 32rpx;
    background: rgba(252, 114, 76, 0.06);
    border: 1rpx solid #fc724c;
    border-radius: 16rpx;
    font-size: 22rpx;
    font-weight: 500;
    color: #fc724c;
    margin-left: 7rpx;
}
.ticket_center {
    position: fixed;
    bottom: 0;
    width: 750rpx;
    height: 102rpx;
    background: #ffffff;
    display: flex;
    .ticket_center_type {
        flex: 1;
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #303133;
        text-align: center;
        line-height: 102rpx;
    }
    .ticket_center_vertical {
        width: 1rpx;
        background-color: #dcdfe6;
    }
}
.announcement-popup {
    .announcement {
        .kuangao (670rpx,531rpx);
        background: @white-color;
        .announcement-title {
            .fontsize (38rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: #18181a;
            .margins (47rpx,34rpx,43rpx,34rpx);
        }
        .announcement-body {
            .paddings (29rpx,29rpx,29rpx,29rpx);
            .kuangao (606rpx,255rpx);
            overflow-y: scroll;
            .margins (auto,32rpx,30rpx,32rpx);
            box-sizing: border-box;
            background: @text-color6;
            opacity: 0.9;
            border-radius: 10rpx;
            .fontsize (28rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color3;
        }
        .announcement-close {
            width: 270rpx;
            height: 88rpx;
            background: linear-gradient(105deg, #2b99ff, #1b8cf5);
            box-shadow: 0px 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
            border-radius: 44rpx;
            font-size: 30rpx;
            line-height: 88rpx;
            text-align: center;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
            position: fixed;
            bottom: 33rpx;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}
</style>
